<template>
	<view class="goods-container"
		:class="newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor"
		:style="{paddingTop:`${newData.pageUDSpacing}rpx` ,paddingBottom: `${newData.pageUDSpacing}rpx`,
		paddingLeft:`${newData.pageLRSpacing}rpx` ,paddingRight: `${newData.pageLRSpacing}rpx`,
		backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background}">
		<!-- 左侧图片 -->
		<view class="l_content" @click="jumpGoodsDetail()">
			<!-- 普通商品 -->
			<image v-if="goodsInfo.picUrls&&goodsInfo.picUrls[0]&&showImg&&goodsInfo.prescription!='2'"
				:src="goodsInfo.picUrls[0]" class="goods_image" @error="showImg=false"></image>
			<image src="/static/image/no_pic.png" class="goods_image" v-if="goodsInfo.prescription!='2'&&(!showImg)">
			</image>
			<!-- 处方药	 -->
			<view class="goods_image" style="position: relative;" v-if="goodsInfo.prescription=='2'">
				<view class="flex flex-column-center goodImg_mask" style="">
					<view class="" style="font-size: 24rpx;">处方药依法不展示包装</view>
					<view class="" style="font-size: 24rpx;">请在药师指导下使用</view>
				</view>
				<image :src="goodsInfo.picUrls[0] ? goodsInfo.picUrls[0] : '/static/image/no_pic.png'" mode="aspectFill"
					class="goods_image"></image>
			</view>
		</view>
		<!-- 右侧内容 -->
		<view class="r_content">
			<view class="" @click="jumpGoodsDetail()">
				<view class="text-black overflow-1 font-32 text-bold">{{goodsInfo.name}}</view>
				<view class="flex justify-between align-center" style="vertical-align: bottom;margin-top: 15rpx;" v-if="showShare">
					<!-- 价格 -->
					<view class="font-26 text-red1" v-if="goodsInfo.skus && goodsInfo.skus.length">
						<text class="text-bold">活动价￥</text>
						<text
							class="font-38 text-bold">{{goodsInfo.skus[0].salesPrice ? goodsInfo.skus[0].salesPrice.toFixed(2) : '0.00'}}</text>
						<text class="text-price text-gray1 line-through margin-left"
							v-if="goodsInfo.skus[0].marketPrice > goodsInfo.skus[0].salesPrice">
							{{ goodsInfo.skus[0].marketPrice ? goodsInfo.skus[0].marketPrice.toFixed(2) : '0.00'}}
						</text>
					</view>
					<!-- 收藏 -->
					<!-- <view style="padding-left: 20rpx;" @click.stop="userCollect(goodsItem)" v-if="showShare">
						<image src="../../static/image/star-full.png" mode="" style="width: 38rpx;height: 38rpx;"
							v-if="goodsItem.storeUp">
						</image>
						<image src="../../static/image/star.png" mode="" style="width: 38rpx;height: 38rpx;" v-else>
						</image>
					</view> -->
				</view>
			</view>
			<view class="share_content" v-if="showShare">
				<image src="../../static/image/lightning.png" mode="" class="shareImg" @click.stop="sharePost"></image>
				<button class="shareBtn1" @click.stop="sharePost" v-if="gType!='yc'">
					<text class="font-26">分享赚￥</text>
					<text class="font-34"
						v-if="userType==1">{{goodsInfo.skus && goodsInfo.skus[0].earning ? goodsInfo.skus[0].earning.toFixed(2) : '0.00' }}</text>
					<text class="font-34"
						v-if="userType==2">{{goodsInfo.skus && goodsInfo.skus[0].earning1 ? goodsInfo.skus[0].earning1.toFixed(2) : '0.00' }}</text>
				</button>				
				<button class="shareBtn1" @click.stop="sharePost" v-if="gType=='yc'">
					<text class="font-30 text-bold">分享</text>
				</button>
			</view>
		</view>
		<create-share ref="createShare" :goodsSpu="goodsInfo" :gType="gType" :activityId="activityId"></create-share>
		<login-pop ref="lPop"></login-pop>
	</view>
</template>

<script>
	import createShare from '../create-poster/create-share.vue'
	import loginPop from '@/components/login-pop/login-pop.vue'
	import api from '@/utils/api'

	const app = getApp();

	export default {
		data() {
			return {
				newData: this.value,
				goodsItem: {},
				showShare: false,
				showImg: true,
				shareShowPop: '',
				userType: null,
				userInfo:null
			};
		},
		props: {
			goodsInfo: {
				type: Object,
				default: () => {}
			},
			value: {
				type: Object,
				default: () => {
					return {
						background: '#ffffff',
						pageLRSpacing: "20",
						pageUDSpacing: "30"
					}
				}
			},
			gType: {
				type: [String || null],
				default: ''
			},
			activityId: {
				type: [String || null],
				default: ''
			}
		},
		components: {
			createShare,
			loginPop
		},
		mounted() {
			this.goodsItem = JSON.parse(JSON.stringify(this.goodsInfo))
			this.showShare = false
			this.userInfo = uni.getStorageSync('user_info')
			if (this.userInfo && this.userInfo.phone && this.userInfo.userLevelId == 2 && this.userInfo.enable == '1') {
				this.showShare = true
				this.userType = this.userInfo.userType
			}else if(this.gType=='yc'&&this.userInfo && this.userInfo.phone&&this.userInfo.userType==3) {
				this.showShare = true
			}
		},
		methods: {
			// 跳转商品详情			
			jumpGoodsDetail() {
				if(this.gType=='yc'&&this.userInfo && this.userInfo.phone&&this.userInfo.userType==3) {
					uni.navigateTo({
						url: '/pages/goods/goods-detail/index?id=' + this.goodsInfo.id + '&activityId=' + this.activityId + '&gType=yc'
					})
				}else {
					app.checkLogin().then(res => {
						uni.navigateTo({
							url: '/pages/goods/goods-detail/index?id=' + this.goodsInfo.id
						})
					}).catch(() => {
						this.$refs.lPop.open()
					})
				}				
			},
			// 生成分享海报
			sharePost() {
				this.$refs.createShare.openSharePop()
			},
			// 商品收藏
			userCollect(goodsItem) {
				if (goodsItem.storeUp) {
					api.userCollectDel({
						spuId: goodsItem.id
					}).then(res => {
						uni.showToast({
							title: '已取消收藏',
							icon: 'success',
							duration: 2000
						});
						this.goodsItem.storeUp = 0
					});
				} else {
					api.userCollectAdd({
						spuId: goodsItem.id
					}).then(res => {
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 2000
						});
						this.goodsItem.storeUp = 1
					})
				}
			},
		}
	};
</script>
<style scoped>
	.goods-container {
		background-color: #fff;
		display: flex;
		border-radius: 20rpx;
	}

	.goods-container .l_content {
		font-size: 0;
	}

	.goods-container .l_content .goods_image {
		width: 260rpx;
		height: 260rpx;
	}

	.goods-container .l_content .goodImg_mask {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 50;
		align-items: center;
		backdrop-filter: blur(2px);
		background-color: rgba(255, 255, 255, 0.2);
		color: #595454;
		font-size: 32rpx;
	}

	.goods-container .r_content {
		display: flex;
		flex: 1;
		width: 0;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20rpx;
	}

	.goods-container .r_content .share_content {
		position: relative;
	}

	.goods-container .r_content .share_content .shareImg {
		width: 110rpx;
		height: 120rpx;
		position: absolute;
		left: 10%;
		bottom: 10rpx;
		z-index: 2;
	}

	.shareBtn1 {
		background-image: linear-gradient(90deg, #FF7A2F, #FF001F);
		color: #fff;
		border-radius: 18rpx;
		text-align: right;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>